<template>
  <div id="tableHeaderContainer" class="relative">
    <n-card
        :title="title"
        :content-style="{ padding: '0px' }"
        :bordered="false"
        header-style="font-size: 16px; padding: 10px 15px; border-radius: 0"
    >
      <template #header-extra>
        <n-space>
          <slot name="table-config"></slot>
          <n-tooltip class="ml-2 mr-2" trigger="hover" v-if="showFilter">
            <template #trigger>
              <n-button type="warning" size="small" @click="showSearchContent = !showSearchContent">
                <template #icon>
                  <n-icon>
                    <FilterIcon />
                  </n-icon>
                </template>
                筛选条件
              </n-button>
            </template>
            展开筛选条件
          </n-tooltip>
          <slot name="top-right"></slot>
        </n-space>
      </template>
    </n-card>
  </div>
  <n-drawer
      v-model:show="showSearchContent"
      placement="top"
      :to="target"
      :height="searchContentHeight"
  >
    <n-drawer-content
        body-content-style="overflow: hidden"
        title="搜索条件"
        closable
        header-style="font-size: 12px; padding: 15px"
    >
      <template #default>
        <slot name="search-content"></slot>
      </template>
      <template #footer>
        <div class="flex justify-end">
          <n-space>
            <n-button type="warning" size="small" @click="doResetSearch">重置</n-button>
            <n-button type="primary" size="small" @click="doSearch">搜索</n-button>
          </n-space>
        </div>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts">
import { defineComponent, nextTick, onMounted, ref } from 'vue'
import { FunnelOutline as FilterIcon } from '@vicons/ionicons5'

export default defineComponent({
  name: 'TableHeader',
  components: { FilterIcon },
  props: {
    title: {
      type: String,
      default: '基本操作',
    },
    showFilter: {
      type: Boolean,
      default: true,
    },
    searchContentHeight: {
      type: String,
      default: '400px',
    },
  },
  emits: ['search', 'reset-search'],
  setup(props, { emit }) {
    const showSearchContent = ref(false)
    const target = ref<HTMLElement | null>(null)
    onMounted(() => {
      nextTick(() => {
        target.value = document.getElementById('tableHeaderContainer')
      })
    })
    function doSearch() {
      showSearchContent.value = false
      emit('search')
    }
    function doResetSearch() {
      emit('reset-search')
    }
    return {
      showSearchContent,
      target,
      doSearch,
      doResetSearch,
    }
  },
})
</script>
